<template>
  <div class="books-query">
    <div>
      <el-form size="large" label-position="top">
        <el-row :gutter="20">
          <el-col :span="4" v-for="item in SearchType" :key="item.value"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label-width="auto" :label="item.label" :prop="item.value">
              <component
                :options="statusOtions"
                :is="item.component"
                :key="item.value"
                :resetData="resetData"
                @change="dataChange($event, item.value)"
              ></component> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </div>
    <div class="books-query-btn">
      <el-button
        type="primary"
        v-for="item in buttonType"
        :key="item.label"
        @click="clickType[item.type]"
        :icon="item.icon"
        >{{ item.label }}</el-button
      >
    </div>

    <div class="books-query-table">
      <el-table
        @selection-change="handleSelectionChange"
        id="all"
        :data="tableData"
        style="width: 100%"
        class="books-query-table-container"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="item in tableColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
        >
          <template v-slot="{ row }">
            <span v-if="item?.type === 'date'">
              {{ convertToDateTimeString(row[item.prop]) }}
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 勾选导出的数据 -->
    <ExportToExcelIndex :tableData="selectTable" :tableColumn="tableColumn" />
  </div>
</template>
<script setup lang="ts">
import ExcelJS from 'exceljs'
import { ref, onMounted, toRefs, reactive } from 'vue'
import { tableColumn, BUTTON_TYPE, buttonType, SearchType, statusOtions } from './config'
import exportToExcel from '@/utils/exportToExcel'
import { QueryBooksData } from '@/api/component/query'
import dayjs from 'dayjs'
import type { BooksList } from '@/api/types/query'

const workbook = new ExcelJS.Workbook()
workbook.creator = 'Me'
workbook.lastModifiedBy = 'Her'
workbook.created = new Date(1985, 8, 30)
workbook.modified = new Date()
workbook.lastPrinted = new Date(2016, 9, 27)
const resetData = ref(0)
const tableData = ref([] as Array<BooksList>)
const queryBooksData = async () => {
  console.log(searchForm)
  const res = await QueryBooksData({})
  tableData.value = res.list
}

const convertToDateTimeString = (dateString: Date) => {
  const date = dayjs(dateString)
  const formattedDateTimeString = date.format('YYYY-MM-DD HH:mm:ss')
  return formattedDateTimeString
}
const exprotExcel = (type: string) => {
  exportToExcel(type, '导出单表')
}
const state = reactive({
  selectTable: [] as Array<BooksList>
})
const handleSelectionChange = (val: any) => {
  state.selectTable = val
}

const clearBook = () => {
  state.selectTable = []
  tableData.value = []
  resetForm()
  resetData.value++
}

const clickType = {
  [BUTTON_TYPE.QUERY]: queryBooksData,
  [BUTTON_TYPE.EXPORTARR]: () => exprotExcel('all'),
  [BUTTON_TYPE.RESET]: clearBook,
  [BUTTON_TYPE.EXPORT]: () => exprotExcel('select-table')
}

const resetForm = () => {
  searchForm.name = ''
  searchForm.status = ''
  searchForm.title = ''
  searchForm.authot = ''
  searchForm.created = ''
  searchForm.update = ''
  searchForm.quantity = undefined
  searchForm.description = ''
  searchForm.isbn = ''
  console.log(searchForm)
}
const defaultFormData = {
  name: '',
  status: '',
  title: '',
  authot: '',
  created: '',
  update: '',
  quantity: undefined,
  description: '',
  isbn: ''
}
let searchForm = reactive({ ...defaultFormData })
// 获取数据
const dataChange = (data: string, value: string) => {
  searchForm[value] = data
}
onMounted(() => {
  queryBooksData()
})

const { selectTable } = toRefs(state)
</script>

<style lang="scss">
.books-query {
  height: 100%;
  &-table {
    height: 500px;
    &-container {
      height: 100%;
    }
  }
  &-btn {
    margin-bottom: 16px;
  }
}
</style>
